<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>消息 - 风行融媒体</title>
  <link rel="stylesheet" href="../styles/background.css">
  <link rel="stylesheet" href="../styles/titlebar.css">
  <link rel="stylesheet" href="../styles/navbar.css">
  <link rel="stylesheet" href="../styles/chat-list.css">
</head>
<body>
  <!-- 自定义标题栏 -->
  <div class="custom-titlebar">
    <div class="titlebar-left">
      <div class="titlebar-avatar">
        <img id="titlebarAvatarImg" src="../assets/avatar.png" alt="用户头像">
      </div>
      <div class="titlebar-title" id="titlebarTitle">消息</div>
    </div>
    <div class="titlebar-right">
      <div class="titlebar-controls">
        <button class="titlebar-btn cloud-sync" id="titlebarCloudSync" title="云同步">
          <svg t="1761036139862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" width="19" height="19"><path d="M806.7072 470.528A290.816 290.816 0 0 0 252.16 371.4048a217.5488 217.5488 0 0 0-9.8304 428.1344 149.1456 149.1456 0 0 0 37.0176 4.352h504.4224a167.8336 167.8336 0 0 0 167.7824-167.7824c1.0752-82.7904-62.1056-154.6752-144.896-165.5808z m-44.6464 44.6464a26.2656 26.2656 0 0 0 19.6096 7.6288h4.352a113.3056 113.3056 0 0 1 0 226.6112H280.5248a114.3808 114.3808 0 0 1-26.1632-3.2768 164.1984 164.1984 0 0 1 19.6096-324.6592 27.3408 27.3408 0 0 0 22.9888-17.408 237.3632 237.3632 0 0 1 458.6496 84.992v3.2768c-1.0752 10.9056 1.0752 17.408 6.5536 22.8864z" p-id="5279" fill="#515151"></path><path d="M489.6768 557.6704a23.1936 23.1936 0 0 0-30.72 0l-27.2384 27.2384V458.5472a21.8112 21.8112 0 1 0-43.5712 0v126.3616l-27.2384-27.2384a23.1936 23.1936 0 0 0-30.72 0 21.0432 21.0432 0 0 0 0 30.72l64.256 64.256c1.0752 1.0752 2.2016 1.0752 3.2768 2.2016s2.2016 1.0752 3.2768 2.2016c1.0752 0 2.2016 1.0752 3.2768 1.0752h10.9056c1.0752 0 2.2016-1.0752 3.2768-1.0752a22.784 22.784 0 0 0 6.5536-4.352l64.256-64.256a21.0432 21.0432 0 0 0 0-30.72zM670.72 508.672l-64.4608-64.3072-1.0752-1.0752c-1.0752 0-1.0752-1.0752-2.2016-1.0752s-1.0752-1.0752-2.2016-1.0752-1.0752-1.0752-2.2016-1.0752-1.0752 0-2.2016-1.0752h-13.056c-1.0752 0-1.0752 0-2.2016 1.0752a1.0752 1.0752 0 0 0-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752l-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752L510.3616 508.672a21.5552 21.5552 0 0 0 30.72 30.72L568.32 512v126.3616a21.8112 21.8112 0 0 0 43.5712 0V512l27.2384 27.2384a21.0432 21.0432 0 0 0 30.72 0 20.48 20.48 0 0 0 1.0752-30.72z" p-id="5280" fill="#515151"></path></svg>
        </button>
        <button class="titlebar-btn minimize" id="titlebarMinimize" title="最小化">
          <span>─</span>
        </button>
        <button class="titlebar-btn maximize" id="titlebarMaximize" title="最大化">
          <span>□</span>
        </button>
        <button class="titlebar-btn close" id="titlebarClose" title="关闭">
          <span>✕</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 侧边导航栏 -->
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="user-avatar">
        <img id="userAvatarImg" src="../assets/avatar.png" alt="用户头像">
      </div>
    </div>
    
    <div class="sidebar-nav">
      <div class="nav-item active" data-view="message">
        <div class="nav-icon">
          <img src="../assets/cd01.svg" alt="消息">
          <span class="notification-badge" id="notificationBadge" style="display: none;">0</span>
        </div>
        <div class="nav-text">消息</div>
      </div>
      <div class="nav-item" data-view="workbench">
        <div class="nav-icon">
          <img src="../assets/cd06.svg" alt="工作台">
        </div>
        <div class="nav-text">工作台</div>
      </div>
      <div class="nav-item" data-view="calendar">
        <div class="nav-icon">
          <img src="../assets/cd02.svg" alt="日历">
        </div>
        <div class="nav-text">日历</div>
      </div>
      <div class="nav-item" data-view="files">
        <div class="nav-icon">
          <img src="../assets/cd05.svg" alt="文件">
        </div>
        <div class="nav-text">文件</div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="nav-item" id="sidebarSettingsBtn">
        <div class="nav-icon">
          <img src="../assets/442P.png" alt="设置">
          <div class="server-status-indicator connecting" id="serverStatusIndicator"></div>
        </div>
        <div class="nav-text">设置</div>
      </div>
    </div>
  </div>

  <div class="chat-container">
    <!-- 左侧聊天列表 -->
    <div class="chat-sidebar">
      <!-- 搜索框 -->
      <div class="search-box">
        <input type="text" id="searchInput" placeholder="搜索联系人或消息内容...">
      </div>

      <!-- 聊天列表 -->
      <div class="chat-list" id="chatList">
        <!-- 聊天项将动态添加到这里 -->
      </div>
    </div>

    <!-- 右侧聊天内容区域 -->
    <div class="chat-content">
      <div class="chat-empty" id="chatEmpty">
        <div class="empty-text">选择一个会话开始聊天</div>
      </div>

      <!-- 聊天窗口（默认隐藏） -->
      <div class="chat-window" id="chatWindow" style="display: none;">
        <!-- 聊天头部 -->
        <div class="chat-header">
          <div class="chat-header-info">
            <img class="chat-header-avatar" id="chatHeaderAvatar" src="../assets/avatar.png" alt="头像">
            <div class="chat-header-text">
              <div class="chat-header-name" id="chatHeaderName">会话名称</div>
              <div class="chat-header-status" id="chatHeaderStatus">在线</div>
            </div>
          </div>
          <div class="chat-header-actions">
            <button class="header-btn" title="语音通话">📞</button>
            <button class="header-btn" title="视频通话">📹</button>
            <button class="header-btn" title="更多">⋮</button>
          </div>
        </div>

        <!-- 消息区域 -->
        <div class="chat-messages" id="chatMessages">
          <!-- 消息将动态添加到这里 -->
        </div>

        <!-- 输入区域 -->
        <div class="chat-input-area">
          <div class="input-toolbar">
            <button class="toolbar-btn" title="表情">😊</button>
            <button class="toolbar-btn" title="文件">📎</button>
            <button class="toolbar-btn" title="图片">🖼️</button>
            <button class="toolbar-btn" title="截图">✂️</button>
          </div>
          <div class="input-box">
            <textarea id="messageInput" placeholder="输入消息..." rows="3"></textarea>
          </div>
          <div class="input-actions">
            <button class="btn-send" id="sendBtn">发送</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="../scripts/titlebar.js"></script>
  <script src="../scripts/navbar.js"></script>
  <script src="../scripts/chat-list.js"></script>
</body>
</html>
